<!--位置所在信息-->
<template>
  <div>
    <div class="top-info clearfix">
      <div class="crumb">
        <span class="tit">您在这里:</span>
        <div class="item">
          <div class="drop">
            <span class="hd"><a href="/hotel/" target="_blank" style="margin-left: 5px">酒店<i></i></a></span>
            <div class="bd" style="width: auto">
              <i class="arrow"><b></b></i>
              <div class="col text-left">
                <strong style="margin-left: 7px">周边国家和地区</strong>
                <ul class="clearfix">
                  <li>
                    <a href="#" target="_blank" title="朝鲜酒店">
                      朝鲜 <span>North Korea</span>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" title="韩国酒店">
                      韩国 <span>Korea</span>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" title="蒙古酒店">
                      蒙古 <span>Mongolia</span>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" title="日本酒店">
                      日本 <span>Japan</span>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" title="俄罗斯酒店">
                      俄罗斯 <span>Russia</span>
                    </a>
                  </li>
                  <li>
                    <a href="#" target="_blank" title="老挝酒店">
                      老挝 <span>Laos</span>
                    </a>
                  </li>
                </ul>
              </div>
              <div class="more">
                <a href="#" target="_blank">&gt;&gt;更多国家和地区</a>
              </div>
            </div>
          </div>
          <em>&gt;</em>
        </div>

        <div class="item">
          <div class="drop">
            <span class="hd"><a href="#" target="_blank" :title="pathnav.address + '酒店'">{{pathnav.address}}酒店<i></i></a></span>
            <div class="bd" style="width: auto">
              <i class="arrow"><b></b></i>
              <div class="col text-left">
                <strong style="margin-left: 7px">中国其他城市</strong>
                <ul class="clearfix">
                  <li>
                    <a href="#" target="_blank" title="北京酒店推荐">北京 <span>Beijing</span></a>
                  </li>
                  <li>
                    <a href="#" target="_blank" title="上海酒店推荐">上海 <span>Shanghai</span></a>
                  </li>
                  <li>
                    <a href="#" target="_blank" title="西安酒店推荐">西安 <span>Xi'an</span></a>
                  </li>
                  <li>
                    <a href="#" target="_blank" title="深圳酒店推荐">深圳 <span>Shenzhen</span></a>
                  </li>
                  <li>
                    <a href="#" target="_blank" title="广州酒店推荐">广州 <span>guangzhou</span></a>
                  </li>
                  <li>
                    <a href="#" target="_blank" title="重庆酒店推荐">重庆 <span>ChongQing</span></a>
                  </li>
                </ul>
              </div>
              <div class="more">
                <a href="#" target="_blank">&gt;&gt;更多城市</a>
              </div>
            </div>
          </div>
          <em>&gt;</em>
        </div>
        <!--酒店名-->
        <div class="item cur">
          <a href="#" target="_blank" :title="pathnav.reserve">{{pathnav.reserve}}</a>
        </div>
      </div>

      <!--天气预报-->
      <div class="littleWeather">
        <ul>
          <li v-for="item in weatherList" :key="item.id">
            <img src="http://images.mafengwo.net/images/mdd_weather/icon/icon8.png" width="25" height="25"/>
            &nbsp;&nbsp;
            <span>{{item.type}}&nbsp;{{item.low}}</span>~
            <span>{{item.high}}</span>
          </li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    props: ["pathnav"],
    data(){
      return{
          city:'',
          weatherList:[],
      }
    },
    methods:{
      searchWeather(){
        var that = this;
        this.$axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city)
                .then(function (response) {
                  that.weatherList = response.data.data.forecast.splice(0,1);
                  // eslint-disable-next-line no-unused-vars
                }).catch(function (err) {

        })
      },
      changeCity(city){
        this.city = city;
        this.searchWeather();
      }
    },
    //自动加载
    created() {
      this.changeCity('成都');
    }
  };
</script>

<style scoped>
  .crumb .item.cur {
    color: #ff7000;
    font-weight: bold;
  }
  .crumb .item.cur:hover {
    text-decoration: underline;
  }
  .crumb .item em {
    margin: 0 6px;
    color: #999;
    font-family: "Hiragino Sans GB", "Hiragino Sans GB W3", "宋体";
    font-style: normal;
  }
  .crumb .drop .hd i {
    position: absolute;
    margin: 8px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 3px solid #ff7000;
    border-left: 3px dashed transparent;
    border-right: 3px dashed transparent;
    overflow: hidden;
    font-size: 0;
  }
  .crumb .item .hd a {
    color: #333;
  }
  .crumb .drop .hd a {
    display: block;
    height: 20px;
    padding: 0 13px 0 5px;
  }
  .crumb .drop .hd {
    height: 20px;
  }
  .crumb .drop {
    float: left;
  }
  .crumb .item {
    float: left;
  }
  .crumb .tit {
    float: left;
    color: #333;
  }
  .top-info .crumb {
    float: left;
    padding-top: 5px;
    color: #666;
    font-size: 12px;
    line-height: 20px;
  }
  .top-info {
    margin-top: 10px;
    height: 30px;
    overflow: hidden;
  }
  .text-left{
    text-align: left;
  }

  .littleWeather{
    float: none;
    padding: 0;
    width: auto;
    font-size: 12px;
    color: #999;
    line-height: 25px;
    text-align: right;
  }
  .littleWeather a{
    text-decoration: none;
    color: #999;
    line-height: 25px;
  }
</style>
